上一篇概述了 RTCDataChannel ，這篇也接續說明這個 API 該怎麼使用。如果有寫過 WebSocket 的人可能會覺得非常熟悉，這之 API 除了跟跟 WebSocket 非常像，同時也支持字符串以及 JavaScript 中的一些二進制類型，如 Blob、ArrayBuffer 和 ArrayBufferView 可以進行資料傳輸。

創建 RTCDataChannel

const dataChannelOptions = {
  ordered: false, // 數據通道是否應保證順序
  maxPacketLifeTime: 3000, // 嘗試重新傳輸失敗消息的最長時間
};

const peerConnection = new RTCPeerConnection(configuration);
const dc= peerConnection.createDataChannel('myDataChannel', dataChannelOptions );

• ordered：決定了數據是否需要按照順序接收
• maxPacketLifeTime：嘗試重新傳輸失敗消息的最長時間。如果消息在這個時間內無法傳遞，則視為失敗
• maxRetransmits：嘗試重新傳輸失敗消息的最大次數，如果傳輸消息超過次數，則視為失敗
• protocol：允許使用子協定，可以提供額外的信息給應用程式
• negotiated：如果設置為 true，需要手動在另一端創建一個具有相同 ID 的數據通道，才能連線
• idnegotiatedtrue：提供 ID ，進行數據交換

發送和接收數據

如果有寫過 Socket IO socket.emit('message', 'Hello, World!'); 就會覺得非常像呢😎

dc.send('Hello, World!');

監聽 message 事件

// 當從遠端對等方收到消息時，物件中的 onmessage 事件處理程式。
dc.onmessage = (event) => {
  console.log(`received: ${event.data}`);
};

// 首次打開或重新打開數據通道時發送
dc.onopen = () => {
  console.log("datachannel open");
};

// 數據傳輸關閉
dc.onclose = () => {
  console.log("datachannel close");
};

重點整理

• RTCDataChannel 是 WebRTC 的 API，用於即時數據傳輸，支持字符串和二進制類型（如Blob、ArrayBuffer）。
• 使用createDataChannel，可配置選項包括順序性、重新傳輸時間等。
• dc.send('Hello, World!');發送數據，類似於Socket.IO的socket.emit。
• dc.onmessage接收消息，dc.onopen在數據通道打開時觸發，dc.onclose在關閉時觸發。

介紹完這些 API ，接著喘口氣下一篇我們來介紹實作時會用到的 Firebase ~

參考資料
RTCDataChannel - Web APIs | MDN (mozilla.org)